<template>
	<view>
		<u-navbar title-color="#fff" :is-back="true" :is-fixed="true" :background="background" :title="nowClub.clubname"
			:back-text-style="{color: '#fff'}">
		</u-navbar>
		<view style="width: 100%;height: 400rpx;background-color: #333333;-webkit-background-size: cover;
		background-repeat: no-repeat;background-position: center;background-size: cover;"
			:style="{'background-image':'url('+nowClub.logo+')'}">
		</view>
		<!-- 社团基本信息 -->
		<view style="background-color: #FFFFFF;width: 90%;margin: 20rpx auto;padding: 20rpx;border-radius: 20rpx;">
			<view style="margin-bottom: 20rpx;font-size: 48rpx;font-weight: 900;">
				{{nowClub.clubname}}
			</view>
			<view style="display: flex;color: #FFFFFF;flex-wrap: wrap;">
				<view
					style="background-color: #09BB07;border-radius: 20rpx;padding: 0 20rpx;width: auto;height: 60rpx;line-height: 60rpx;margin: 10rpx;">
					{{nowClub.university}}</view>
				<view :style="{backgroundColor: nowClub.status==1?'#09BB07':'#ffaa00'}"
					style="border-radius: 20rpx;padding: 0 20rpx;width: auto;height: 60rpx;line-height: 60rpx;margin: 10rpx;">
					{{nowClub.status==1?"审核通过":"审核中"}}</view>
				<view
					style="background-color: #09BB07;border-radius: 20rpx;padding: 0 20rpx;width: auto;height: 60rpx;line-height: 60rpx;margin: 10rpx;">
					发布活动数：{{nowClub.movementNum}}</view>
				<view
					style="background-color: #09BB07;border-radius: 20rpx;padding: 0 20rpx;width: auto;height: 60rpx;line-height: 60rpx;margin: 10rpx;">
					社团人数：{{nowClub.member}}</view>
			</view>
			<view style="margin-top: 20rpx;text-indent:60rpx;letter-spacing:1px;">
				社团创建时间：{{nowClub.createtime}}
			</view>
			<view style="margin-top: 20rpx;text-indent:60rpx;letter-spacing:1px;">
				{{nowClub.detail}}
			</view>
		</view>
		<!-- 社团管理员 -->
		<view style="background-color: #FFFFFF;width: 90%;margin: 20rpx auto;padding: 20rpx;border-radius: 20rpx;">
			<view style="padding-bottom: 10rpx;margin-bottom: 20rpx;font-size: 36rpx;font-weight: 900;border-bottom: 5rpx solid #007AFF;width: 200rpx;">
				社团管理员
			</view>
			<scroll-view scroll-x style="height: 200rpx;">
				<view style="display: flex;">
					<block v-for="(item,index) in adminClubList" :key="index">
						<view style="width: 160rpx;text-align: center;padding: 15rpx;margin: 15rpx;position: relative;">
							<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120"
								:height="120" :src="item.userAvatar" mode="aspectFill">
								<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
								<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
							</u-image>
							<view class="username">
								{{item.userName}}
							</view>
							<view style="position: absolute;right: 0;top: 0;background-color: #ff557f;border-radius: 20rpx;padding: 5rpx 10rpx;">
								{{item.duties}}
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 社团成员 -->
		<view style="background-color: #FFFFFF;width: 90%;margin: 20rpx auto;padding: 20rpx;border-radius: 20rpx;">
			<view style="padding-bottom: 10rpx;margin-bottom: 20rpx;font-size: 36rpx;font-weight: 900;border-bottom: 5rpx solid #007AFF;width: 200rpx;">
				社团成员
			</view>
			<scroll-view scroll-x style="height: 200rpx;">
				<view style="display: flex;">
					<block v-for="(item,index) in userClubList" :key="index">
						<view style="width: 160rpx;text-align: center;padding: 15rpx;margin: 15rpx;">
							<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120"
								:height="120" :src="item.userAvatar" mode="aspectFill">
								<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
								<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
							</u-image>
							<view class="username">
								{{item.userName}}
							</view>
						</view>
					</block>
					<view v-if="userClubList==null||userClubList.length==0">该社团无成员</view>
				</view>
			</scroll-view>
		</view>
		<!-- 操作 -->
		<view style="background-color: #FFFFFF;width: 90%;margin: 20rpx auto;padding: 20rpx;border-radius: 20rpx;">
			<view style="padding-bottom: 10rpx;margin-bottom: 20rpx;font-size: 36rpx;font-weight: 900;border-bottom: 5rpx solid #007AFF;width: 200rpx;">
				操作
			</view>
			<scroll-view scroll-x style="height: 200rpx;">
				<!-- 加入按钮 -->
				<u-button style="font-size: 24rpx;letter-spacing:30rpx;height: 80rpx;line-height: 80rpx;font-size: 48rpx;font-weight: 900;width: 100%;"
				@click="join()" data-name="加入社团" shape="square" size="default" :ripple="true" :type="joinButtonColor"
				:loading="joinLoding"
				:disabled="joinButtonColor=='success'||joinButtonColor=='error'">
					{{joinButtonText}}
				</u-button>
				<view v-if="isExistThisClub!=null" style="display: flex;justify-content: center;margin-top: 30rpx;">
					<u-button v-if="isExistThisClub.status==1" 
					style="font-size: 24rpx;letter-spacing:10rpx;height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 900;"
					@click="exitThisClub()" data-name="退出社团" shape="square" size="mini" :ripple="true" type="error"
					:loading="exitThisClubLoading">
						{{isExistThisClub.admin==2?"解散社团":"退出社团"}}
					</u-button>
				</view>
			</scroll-view>
		</view>
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true"
			:show-title="false" @confirm="confirm" :content="content">
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				background: {
					'background': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				joinButtonColor:"warning",
				joinButtonText:"加入社团",
				joinLoding:false,
				datailHeight: this.swiperHeight - 371,
				nowClub: {
					"id": 7,
					"clubname": "篮球协会",
					"member": 0,
					"logo": "http://gulipro-edu.oss-cn-beijing.aliyuncs.com/images/1617598791027u=2702391464,3507406189&fm=26&gp=0.jpeg",
					"detail": "中国篮球协会（Chinese Basketball Association）成立于1956年6月，简称“中国篮协”（CBA），是具有独立法人资格的全国性群众体育组织，是由各省、自治区、直辖市篮球协会、各行业篮球协会及解放军相应的运动组织为团体会员组成的、全国性、非营利性的联合组织，是中华全国体育总会的团体会员，是中国奥林匹克委员会承认的奥运项目组织，是代表中国参加国际篮球联合会和亚洲篮球联合会的唯一合法组织。",
					"createtime": "2021-04-05",
					"university": "四川学院",
					"universityId": 3,
					"movementNum": 0,
					"status": "1",
					"masterid": 10,
					"mastername": "小美",
					"deleted": 0
				},
				userClubList: [],
				adminClubList: [],
				
				isExistThisClub:null,
				exitThisClubLoading:false,
				content:"",
				showModal:false,
				//得到当前用户是否属于这个社团，如果属于则不能加入，否则可以加入
			}
		},
		onLoad(option) {
			this.nowClub = JSON.parse(decodeURIComponent(option.nowClub));
			if(this.nowClub.status!=1){
				this.joinButtonColor="error"
				this.joinButtonText="社团正在审核中"
			}
			console.log("当前社团",this.nowClub)
			this.getNowClubUser();
			this.panduanNowUserExistThisClub();
		},
		methods: {
			getNowClubUser() {
				console.log(this.url.userclub.getOneClubAllUsers+"/"+this.nowClub.id)
				uni.request({
					url: this.url.userclub.getOneClubAllUsers+"/"+this.nowClub.id, 
					method:'GET',
					header: {},
					success: (res) => {
						console.log("得到当前社团成员",res)
						this.userClubList = res.data.userClubList
						this.adminClubList = res.data.adminClubList
					},
					fail:(res)=>{
						console.log("失败 -- 得到当前社团成员",res)
					}
				});
			},
			panduanNowUserExistThisClub(){
				var that = this;
				uni.request({
					url: this.url.userclub.getOneUserClub+"/"+this.loginUserInfo.id+"/"+this.nowClub.id, 
					method:'GET',
					header: {},
					success: (res) => {
						console.log("得到当前登录用户与社团的关系",res)
						this.isExistThisClub = res.data.nowUsernowClub
						if(this.isExistThisClub!=null){
							if(this.isExistThisClub.status==0){
								this.joinButtonColor="success"
								this.joinButtonText="申请正在审核中"
							}else if(this.isExistThisClub.status==1){
								this.joinButtonColor="success"
								this.joinButtonText="你已是社团一员"
							}else if(this.isExistThisClub.status==2){
								this.joinButtonColor="error"
								this.joinButtonText="申请未通过"
							}
						}
					},
					fail:(res)=>{
						console.log("失败 -- 得到当前登录用户与社团的关系",res)
					}
				});
			},
			join(){
				this.joinLoding =true; 
				console.log(213)
				
				var userClub = {
					userId:this.loginUserInfo.id,
					userName:this.loginUserInfo.username,
					userAvatar:this.loginUserInfo.avatar,
					clubId:this.nowClub.id,
					clubName:this.nowClub.clubname,
					clubLogo:this.nowClub.logo
				}
				console.log(this.url.userclub.save)
				uni.request({
					url: this.url.userclub.save, 
					method:'POST',
					data: JSON.stringify(userClub),
					header: {
						"content-type":"application/json;charset=UTF-8"
					},
					success: (res) => {
						if(res.statusCode==200){
							console.log("申请加入社团",res)
							this.joinButtonColor="success"
							this.joinButtonText="申请正在审核中"
						}
						this.joinLoding =false; 
					},
					fail:(res)=>{
						console.log("失败 -- 申请加入社团",res)
						this.joinLoding =false; 
					}
				});
				console.log(comment)
			},
			exitThisClub(){
				this.showModal=true;
				if(this.isExistThisClub.admin==2){
					this.content = "确认解散该社团"
				}else{
					this.content = "确认退出该社团"
				}
			},
			confirm(){
				uni.request({
					url: this.url.userclub.exitClub, 
					method:'POST',
					data: JSON.stringify(this.isExistThisClub),
					header: {
						"content-type":"application/json;charset=UTF-8"
					},
					success: (res) => {
						if(res.statusCode==200){
							console.log("退出社团成功",res)
							uni.navigateBack({
							    delta: 1
							});
						}
					},
					fail:(res)=>{
						console.log("失败 -- 退出社团",res)
						this.joinLoding =false; 
					}
				});
			}
		}
	}
</script>

<style>
.username{
	overflow: hidden;
	-webkit-line-clamp: 1;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;margin-top: 15rpx;
}
</style>
